<template>
<Card title="监控状况">

  <div class="top-area">
      <div class="top-card back-one">
        <div style="padding-left: 20px;">
          <img style="height: 56px;width: 56px;" src="@/assets/images/shishi/c-one.png" alt="">
        </div>
        <div class="top-text">
          <div class="top-title">设备总数</div>
          <div class="top-value">{{_.get(deviceCount,'all')||0}}</div>
        </div>
      </div>
      <div class="top-card back-two">
        <div style="padding-left: 20px;">
          <img style="height: 56px;width: 56px;" src="@/assets/images/shishi/c-two.png" alt="">
        </div>
        <div class="top-text">
          <div class="top-title">运行设备</div>
          <div class="top-value" style="color: #00FFD7;">{{_.get(deviceCount,'run')||0}}</div>
        </div>
      </div>
      <div class="top-card back-three">
        <div style="padding-left: 20px;">
          <img style="height: 56px;width: 56px;" src="@/assets/images/shishi/c-three.png" alt="">
        </div>
        <div class="top-text">
          <div class="top-title">告警设备</div>
          <div class="top-value" style="color: #E5885D;">{{_.get(deviceCount,'abnormal')||0}}</div>
        </div>
      </div>
      <div class="top-card back-four">
        <div style="padding-left: 20px;">
          <img style="height: 56px;width: 56px;" src="@/assets/images/shishi/c-four.png" alt="">
        </div>
        <div class="top-text">
          <div class="top-title">离线设备</div>
          <div class="top-value" style="color: #FFD342;">{{_.get(deviceCount,'offline')||0}}</div>
        </div>
      </div>
    </div>

  <!-- <ul class="monitor-box">
    <li >
      <span>设备总数</span>
      <h4><b class="status">{{_.get(deviceCount,'all')||0}}</b><span> / 台</span></h4>
    </li>
    <li >
      <span>运行设备</span>
      <h4><b class="status normal">{{_.get(deviceCount,'run')||0}}</b><span> / 台</span></h4>
    </li>
   <li >
     <span>故障设备</span>
     <h4><b class="status fault">{{_.get(deviceCount,'fault')||0}}</b><span> / 台</span></h4>
   </li>
    <li >
      <span>告警设备</span>
      <h4><b class="status abnormal">{{_.get(deviceCount,'abnormal')||0}}</b><span> / 台</span></h4>
    </li>
    <li >
      <span>离线设备</span>
      <h4><b class="status offline">{{_.get(deviceCount,'offline')||0}}</b><span> / 台</span></h4>
    </li>
  </ul> -->
</Card>
</template>

<script>
import base from '@/mixins/base';
import {deviceTotal} from '@/api/realtimeData';
export default {
  mixins:[base],
  name: "mointorStatus",
  created() {
    this.getData();
  },
  data(){
    return {
      deviceCount:{},
    }
  },
  methods:{
   async getData(){
      let res =!this.orgIds?{}:await  deviceTotal({pOrgId:this.orgIds});
      this.deviceCount=_.get(res,'data')||{}
    }
  },
}
</script>
<style scoped >


.top-area {
  margin-top: 20px;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
}

.top-card {
  width: calc((100% - 60px) / 4);
  height: 120px;
  display: flex;
  align-items: center;
  /* // background-color: #0A1E3E; */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
}

.back-one {
  background-image: url('../../assets/images/shishi/back-one.png');

}

.back-two {
  background-image: url('../../assets/images/shishi/back-two.png');
}

.back-three {
  background-image: url('../../assets/images/shishi/back-three.png');
}

.back-four {
  background-image: url('../../assets/images/shishi/back-four.png');
}

.top-text {
  height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20px;
}

.top-title {
  font-weight: 400;
  font-size: 14px;
}

.top-value {
  font-weight: bold;
  font-size: 28px;
}

.echart-card {
  height: 100%;
  flex: 1;
  background-color: var(--primary-table-bg-color);
  padding: 20px;
  overflow: hidden;
}

.flex-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.monitoring-btn-active {
  cursor: pointer;
 min-width: 75px;
  height: 32px;
  padding: 0 15px!important;
  display: inline-block;
  background: var(--primary-color);
  border-radius: 16px;
  display: flex;
  color: white;
  align-items: center;
  justify-content: space-around;
}

.btn-common {
  cursor: pointer;
  min-width: 75px;
  padding: 0 15px !important;
  height: 32px;
  background: var(--primary-table-bg-color);
  border-radius: 16px;
  border: 1px solid #3564A9;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #3564A9;
}

/* // 超出显示省略号 */
.over {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
<style scoped lang="less">
@import "../../styles/setting";
.status{
  &.normal{
    color:@S03_005
  }
  &.offline{
     color:@S03_001
  }
  &.fault{
    color:@S03_003
  }
  &.abnormal{
    color:@S03_003
  }
}
.monitor-box{
  display: flex;
  justify-content: space-between;
  h4{
    font-size: 20px;
    text-align: center;
    span{
      font-size: 16px;
      font-weight: normal;
    }
  }
}
</style>
